<template>
    <div class="data-content">
        <div style="padding-left: 20px;">
            <el-tabs v-model="activeName" @tab-click="handleClick">

                <el-tab-pane label="全国综合评价等级" name="zonghe">
                    <div v-if="jtPingJiaList.rows.length > 0" style="font-size: 16px; padding: 10px 0 10px 0">
                        <div style="font-size: 15px;">
                            共查询到 <span style="color: #1989fa;">{{ jtPingJiaList.pageObj.countSize }}</span> 条数据，
                            当前第 <span style="color: #1989fa;">{{ jtPingJiaList.pageObj.curpage ? jtPingJiaList.pageObj.curpage:'1' }}</span> 页，
                            共计 <span style="color: #1989fa;">{{ jtPingJiaList.pageObj.maxPage }}</span> 页
                            <el-button type="text" @click.stop="pingjiaPreviousPage(jtPingJiaList.pageObj.curpage)"> 上一页</el-button>
                            <el-button type="text" @click.stop="pingjiaNextPage(jtPingJiaList.pageObj.curpage)"> 下一页</el-button>
                        </div>
                    </div>

                    <table class="layui-table">
                        <colgroup>
                            <col width="60">
                            <col width="200">
                            <col width="120">
                            <col>
                            <col width="160">
                            <col width="160">
                        </colgroup>
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>企业类型</th>
                            <th>评价年份</th>
                            <th>等级</th>
                            <th>得分</th>
                            <th>备注</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item, index) in jtPingJiaList.rows" :key="index">
                            <td>{{index + 1}}</td>
                            <td>{{ item.companyType }}</td>
                            <td>{{ item.oeriodCode }}</td>
                            <td>{{ item.evaGrade }}</td>
                            <td>{{ item.doScore }}</td>
                            <td>{{ item.remark }}</td>
                        </tr>
                        </tbody>
                    </table>
                </el-tab-pane>

                <el-tab-pane label="各地评价等级" name="gedi" v-if="jtPingJiaType != '1'">

                    <div v-if="jtPingJiaList.rows.length > 0" style="font-size: 16px; padding: 10px 0 10px 0">
                        <div style="font-size: 15px;">
                            共查询到 <span style="color: #1989fa;">{{ jtPingJiaList.pageObj.countSize }}</span> 条数据，
                            当前第 <span style="color: #1989fa;">{{ jtPingJiaList.pageObj.curpage ? jtPingJiaList.pageObj.curpage:'1' }}</span> 页，
                            共计 <span style="color: #1989fa;">{{ jtPingJiaList.pageObj.maxPage }}</span> 页
                            <el-button type="text" @click.stop="pingjiaPreviousPage(jtPingJiaList.pageObj.curpage)"> 上一页</el-button>
                            <el-button type="text" @click.stop="pingjiaNextPage(jtPingJiaList.pageObj.curpage)"> 下一页</el-button>
                        </div>
                    </div>

                    <table class="layui-table">
                        <colgroup>
                            <col width="60">
                            <col width="200">
                            <col width="120">
                            <col>
                            <col width="160">
                            <col width="160">
                        </colgroup>
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>评价省份</th>
                            <th>评价年份</th>
                            <th>等级</th>
                        </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item, index) in jtPingJiaList.rows" :key="index">
                                <td>{{index + 1}}</td>
                                <td>{{ item.evaluateprovince }}</td>
                                <td>{{ item.oeriodCode }}</td>
                                <td>{{ item.evaGrade }}</td>
                            </tr>
                        </tbody>
                    </table>
                </el-tab-pane>

            </el-tabs>
        </div>

        <el-link v-if="jtPingJiaList.rows.length > 0" type="info" :underline="false">*此数据来全国公路建设市场信用信息管理系统官方网站</el-link>
    </div>
</template>

<script>
export default {
    props: {
        jiaotongComId: {
            type: String,
            default: "",
        },
        corpType: {
            type: String,
            default: "",
        },
        navName: {
            type: String,
            default: "",
        },
    },
    data: () => ({
        jtPingJiaList: { rows: [] },
        jtPingJiaShowType: "zonghe",
        jtPingJiaType: "1",
        pingjiaPageNo: 1,
        pingjiaPageSize: 10,
        activeName:'zonghe'
    }),
    watch:{
        jiaotongComId:{
            handler(n,o){
                this.getJTPingJia("zonghe");
            },
            deep:true,
        }
    },
    methods: {
        handleClick(tab, event) {
            this.pingjiaPageNo = 1;
            this.getJTPingJia(tab.name)
        },
        //获取 交通 全国综合评价
        getJTPingJia: function (type) {
            this.jtPingJiaShowType = type;
            
            var that = this;
            if(!that.jiaotongComId){return}
            var params = {
                comId: that.jiaotongComId,
                type: that.jtPingJiaType,
                pageNo: that.pingjiaPageNo,
                pageSize: that.pingjiaPageSize,
            };

            if (type == "gedi") {
                params.type = "";
            }

            this.$ajax({
                type: "get",
                url: `${that.$store.state.api.searchUrl}/searchjiaotong/jiaotong/pingjialist`,
                data: params,
                callback: function (data, res) {
                    if (data.pageObj.countSize){
                        that.jtPingJiaList = data;
                        this.$emit('pushValidNames',this.navName)
                    }
                },
            });
        },
        //列表 下一页
        pingjiaNextPage: function(pageNo){
            this.pingjiaPageNo = pageNo + 1;
            this.getJTPingJia(this.activeName);
        },
        //列表 上一页
        pingjiaPreviousPage: function(pageNo){
            if(pageNo > 1){
                this.pingjiaPageNo = pageNo - 1;
            }else {
                this.pingjiaPageNo = 1;
            }
            this.getJTPingJia(this.activeName);
        },
    },
    mounted() {
        var type = "";
        if (this.corpType == "监理") {
            type = "1";
        } else if (this.corpType == "施工") {
            type = "0";
        } else if (this.corpType == "勘察设计") {
            type = "2";
        }

        this.jtPingJiaType = type;
        this.getJTPingJia("zonghe");
    },
};
</script>

<style scoped lang="scss">
.data-content {
    .datas_tab {
        display: flex;
        float: none;
        margin-left: 8px;
        margin-bottom: 4px;
        .li {
            display: block;
            float: left;
            margin-left: 8px;
            font-size: 14px;
            height: 29px;
            line-height: 29px;
            padding: 0px 2px;
            cursor: pointer;
            .val{
                font-style: italic;
                color: #348bda;
            }
        }
        .active{
            color: #fff;
            background: #348bda;
            text-decoration: none;
        }
    }
    // border-bottom: 1px solid #efefef;
    padding: 20px 15px;
    .layui-table {
        width: 100%;
        border-collapse: collapse;
    }
    .layui-table td,
    .layui-table th {
        padding: 12px 10px;
        text-align: center;
        border: 1px solid #ddd;
        font-size: 15px;
    }
    .layui-table tr th {
        background: #f9f9f9;
        color: #333;
        position: inherit;
    }
}
</style>
